<#-- @ftlvariable name="entity" type="com.xci.edu.core.entity.EduStudentPeriodDetails" -->
<#include "/sys/_layout.ftl">
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课件展示</title>
    <#--    <link rel="stylesheet" type="text/css" href="/css/htmleaf-demo.css">-->
    <link rel="stylesheet" href="/css/ppt.css">
        <link rel="stylesheet" href="/css/icon-font/style.css">
    <style type="text/css">
        /*html {*/
        /*    background: white;*/
        /*}*/

        .title {
            font: 24px/1.5 weight;
            color: #3755ad;
            text-align: center;
            margin: 20px 0;
        }

        .centerInfo {
            /*position: absolute;*/
            /*top: 50%;*/
            /*left: 50%;*/
            /*transform: translate(-50%, -50%);*/
        }

        /*.ppt_content {*/
        /*    margin: 0 auto;*/
        /*}*/

        .btn {
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            -webkit-user-select: none;
            border: 1px solid transparent;
            border-radius: 4px;
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            margin-bottom: 0;
            padding: 6px 12px;
            text-align: center;
            user-select: none;
            vertical-align: middle;
            white-space: nowrap;
        }

        .btn-primary {
            background-color: #428bca;
            border-color: #357ebd;
            color: #ffffff;
        }

    </style>
</head>
<body>
<div class="htmleaf-container" style="background: white ; margin: 0 ; padding: 0">
    <#--    <header class="htmleaf-header">-->
    <#--    </header>-->
    <div class="centerInfo">
        <div>
            <h3 class="title" style="float: right;margin: 0 auto">
                学习计时:
                <span id="timer">00:00:00</span>
            </h3>
            <@echo test=true>
                <button class="btn btn-primary ml-5" onclick="stopTimer()">
                    <i class="icon-logout"></i> 签退
                </button>
                <button class="btn btn-primary ml-5" onclick="startTimer()">
                    <i class="fa fa-search"></i> 继续
                </button>
            </@echo>
        </div>

        <#if '${entity.ifPPT}'>
            <div class="testppt" ></div>
        </#if>
        <#---------------------------->

        <#--------------------------------->

        <#if '${entity.ifVideo}'>
            <div style="color:white">
                <tr>
                    <td width="150px">
                        <a href="" style="color: aquamarine">上一集</a>
                        <a href="" style="color: aquamarine">下一集</a>
                    </td>
                    <td style="margin: 0 auto">第三课
                    </td>
                </tr>
            </div>
            <div style="margin: 0 auto">
                <video id="Video1" controls style="margin:0 auto"
                       height="533"
                       width="100%" title="video element">
                    <source src="/img/1.mp4" type="video/mp4">
                </video>
            </div>
        </#if>
        <div style="width: 80% ;margin: 0 auto; background: white;color: #74777b">
            <div class="tp h2-title">温馨提示</div>
            <p> 1、为保证学习效果，建议驾驶人使用IE8以上版本内核浏览器。同时平台支持谷歌、火狐等浏览器。 </p>
            <p> 2、学习开始时，系统会弹出验证窗口：通过后，系统开始记录学时，驾驶人如果需要离开或保存学时，点击学习右侧签退按钮，完成验证后，系统保存当次有效学时。</p>
            <p> 3、学习过程中，会依据各地管理规则设置，随机弹出验证窗口，中间验证过程有设置等待时间，如果超时或回答错误次数超出，本次学习的学时将不被记录。驾驶人如果中间离开，请提前做好签退保存学时。</p>
            <p> 4、每个课件系统设置规定学时，课件学时达到规定学时后，系统将不再计时，驾驶人可通过课程列表更换其他课件继续学习。驾驶人每天学习的学时，不能超过各地设置的当天最大学时，超过最大学时，驾驶人可学习但系统不再计时。每天最大学时以当地管理规则为准，一般默认为每天4小时。</p>
            <p> 5、平台不允许多台电脑同时登录同一个账户，账号重新登录后，前面已登录未保存的学时将作废，并会退出登录窗口。建议驾驶人首次登录后，及时更改登录密码。</p>
        </div>
    </div>
</div>
<#--<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>-->
<script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="/js/ppt.js"></script>
<script>

    var oBox = document.getElementById('timer');
    var startTime = 3590;
    var timers;

    function CountDown() {
        var h, m, s, t;
        ++startTime;

        s = Math.floor(startTime % 60);
        m = Math.floor(startTime % 3600 / 60);
        h = Math.floor(startTime / 3600);
        s = (s >= 10) ? s : '0' + s;
        m = (m >= 10) ? m : '0' + m;
        h = (h >= 10) ? h : '0' + h;
        oBox.innerHTML = h + ":" + m + ":" + s;
    }

    startTimer();

    function stopTimer() {
        window.clearInterval(timers);
    }

    function startTimer() {
        timers = setInterval("CountDown()", 1000);
    }

    $('.testppt').ppt({
        width: 800,
        height: 533,
        imageUrl: [
            {src: '/img/ppt/ppt-1.jpg'},
            {src: '/img/ppt/ppt-2.jpg'},
            {src: '/img/ppt/ppt-3.jpg'},
            {src: '/img/ppt/ppt-4.jpg'},
            {src: '/img/ppt/ppt-5.jpg'}
        ]
    })

    function signOut() {
        jx.dialog({
            title: '学习窗体',
            url: jx.url('/background/eduStudentPeriodDetails/student_period'),
            // params: {roleIds: [id]  startTime},
            width: '100%',
            height: '100%'
        });
    };

</script>

</body>
</html>



